<template>
	<div class="title-view">
		<div style="border-radius: 10rpx" :style="{ backgroundColor: modelData.backgroundColor }">
			<!--      风格1-->
			<div v-if="modelData.style === 1" class="title-li clearfix style-1">
				<div class="float_left style-1-left">
					<p
						class="s1-master-t"
						:style="{
							color: modelData.master.color,
							fontSize: modelData.master.fontSize * 2 + 'rpx',
							fontWeight: modelData.master.fontWeight.includes('bold') ? 'bold' : 'normal',
							fontStyle: modelData.master.fontWeight.includes('italic') ? 'italic' : 'normal'
						}"
					>
						{{ modelData.master.title }}
					</p>
					<p
						v-if="modelData.branch.title"
						class="s1-branch-t"
						:style="{
							color: modelData.branch.color,
							fontSize: modelData.branch.fontSize * 2 + 'rpx'
						}"
					>
						{{ modelData.branch.title }}
					</p>
					<img class="style1-bg" :src="require('@/static/title-style/title-1-bg.png')" alt="" />
				</div>
				<div
					@click="goPage(modelData.link, modelData.switchTab)"
					v-if="modelData.showMore"
					class="float_right more-btn"
					:style="{ paddingTop: modelData.branch.title ? '20rpx' : '0' }"
				>
					查看更多
					<span class="ibonfont ibonjinru"></span>
				</div>
			</div>
			<!--      风格2-->
			<div v-if="modelData.style === 2" class="title-li clearfix style-2">
				<img :src="require('@/static/title-style/title-2-bg.png')" alt="" />
				<div
					class="style-2-master"
					:style="{
						color: modelData.master.color,
						fontSize: modelData.master.fontSize * 2 + 'rpx',
						fontWeight: modelData.master.fontWeight.includes('bold') ? 'bold' : 'normal',
						fontStyle: modelData.master.fontWeight.includes('italic') ? 'italic' : 'normal'
					}"
				>
					{{ modelData.master.title }}
				</div>
			</div>
			<!--      风格3-->
			<div v-if="modelData.style === 3" class="title-li clearfix style-3">
				<img :src="require('@/static/title-style/title-3-bg.png')" alt="" />
				<div
					class="style-3-master"
					:style="{
						color: modelData.master.color,
						fontSize: modelData.master.fontSize * 2 + 'rpx',
						fontWeight: modelData.master.fontWeight.includes('bold') ? 'bold' : 'normal',
						fontStyle: modelData.master.fontWeight.includes('italic') ? 'italic' : 'normal'
					}"
				>
					{{ modelData.master.title }}
				</div>
			</div>
			<!--      风格4-->
			<div v-if="modelData.style === 4" class="title-li clearfix style-4">
				<img :src="require('@/static/title-style/title-4-bg.png')" alt="" />
				<div
					class="style-4-master"
					:style="{
						color: modelData.master.color,
						fontSize: modelData.master.fontSize * 2 + 'rpx',
						fontWeight: modelData.master.fontWeight.includes('bold') ? 'bold' : 'normal',
						fontStyle: modelData.master.fontWeight.includes('italic') ? 'italic' : 'normal',
						transform: modelData.branch.title ? 'translateY(-70%)' : 'translateY(-50%)'
					}"
				>
					{{ modelData.master.title }}
				</div>
				<div
					class="style-4-branch"
					:style="{
						color: modelData.branch.color,
						fontSize: modelData.branch.fontSize * 2 + 'rpx'
					}"
				>
					{{ modelData.branch.title }}
				</div>
			</div>
			<!--      风格5-->
			<div v-if="modelData.style === 5" class="title-li style-5">
				<div>
					<span
						:style="{
							color: modelData.master.color
						}"
						class="style-5-line"
					>
						——
					</span>
					<span
						class="style-5-master"
						:style="{
							color: modelData.master.color,
							fontSize: modelData.master.fontSize * 2 + 'rpx',
							fontWeight: modelData.master.fontWeight.includes('bold') ? 'bold' : 'normal',
							fontStyle: modelData.master.fontWeight.includes('italic') ? 'italic' : 'normal'
						}"
					>
						{{ modelData.master.title }}
					</span>
					<span
						:style="{
							color: modelData.master.color
						}"
						class="style-5-line"
					>
						——
					</span>
				</div>
				<div
					v-if="modelData.branch.title"
					class="style-5-branch"
					:style="{
						color: modelData.branch.color,
						fontSize: modelData.branch.fontSize * 2 + 'rpx'
					}"
				>
					{{ modelData.branch.title }}
				</div>
			</div>
			<!--      风格6-->
			<div v-if="modelData.style === 6" class="title-li clearfix style-6">
				<div class="float_left">
					<span class="style-6-line">|</span>
					<span
						class="title-text"
						:style="{
							color: modelData.master.color,
							fontSize: modelData.master.fontSize * 2 + 'rpx',
							fontWeight: modelData.master.fontWeight.includes('bold') ? 'bold' : 'normal',
							fontStyle: modelData.master.fontWeight.includes('italic') ? 'italic' : 'normal'
						}"
					>
						{{ modelData.master.title }}
					</span>
				</div>
				<div @click="goPage(modelData.link, modelData.switchTab)" v-if="modelData.showMore" class="float_right more-btn">
					查看更多
					<span class="ibonfont ibonjinru"></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	}
};
</script>

<style scoped lang="scss">
.title-view {
	padding: 0 22rpx;
}
.title-li {
	padding: 20rpx 0;
}
.style-6 {
	padding-left: 20rpx;
	padding-right: 20rpx;
	.title-text {
		margin-left: 12rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
	.style-6-line {
		font-size: 24rpx;
		display: inline-block;
		transform: translateY(-4rpx);
		color: #000000;
		font-weight: bold;
	}
}

.more-btn {
	line-height: 44rpx;
	font-size: 24rpx;
	color: #999999;
}
.iconjinru1 {
	font-size: 24rpx;
}
.style-1 {
	padding: 20rpx;
	padding-bottom: 40rpx;
	.style-1-left {
		padding-left: 60rpx;
		position: relative;
		.s1-master-t {
			font-size: 32rpx;
			font-weight: bold;
			z-index: 1;
			position: relative;
		}
		.s1-branch-t {
			font-size: 24rpx;
			color: #888;
			z-index: 1;
			position: relative;
		}
		.style1-bg {
			position: absolute;
			bottom: -28rpx;
			left: 12rpx;
			width: 100rpx;
			height: 96rpx;
		}
	}
	.more-btn {
		padding-top: 20rpx;
	}
}
.style-5 {
	text-align: center;
	.style-5-master {
		font-size: 32rpx;
		font-weight: bold;
		padding: 0 20rpx;
	}
	.style-5-branch {
		font-size: 24rpx;
		color: #999999;
	}
}
.style-2 {
	text-align: center;
	position: relative;
	img {
		width: 330rpx;
		height: 92rpx;
	}
	.style-2-master {
		position: absolute;
		text-align: center;
		top: 50%;
		transform: translateY(-58%);
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		display: block;
		font-weight: bold;
		font-size: 32rpx;
	}
}
.style-3 {
	text-align: center;
	position: relative;
	img {
		width: 300rpx;
		height: 76rpx;
	}
	.style-3-master {
		position: absolute;
		text-align: center;
		top: 50%;
		transform: translateY(-65%);
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		display: block;
		font-weight: bold;
		font-size: 32rpx;
	}
}
.style-4 {
	text-align: center;
	position: relative;
	img {
		width: 155px;
		height: 76rpx;
	}
	.style-4-master {
		color: #5739a8;
		position: absolute;
		text-align: center;
		top: 50%;
		transform: translateY(-70%);
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		display: block;
		font-weight: bold;
		font-size: 36rpx;
	}
	.style-4-branch {
		color: #5739a8;
	}
}
</style>
